<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛--登录</TITLE>
<Link rel="stylesheet" type="text/css" href="style/style.css"/>

</HEAD>

<BODY>
<DIV>
	<IMG src="image/logo.gif">
</DIV>
<!--      用户信息、登录、注册        -->

	<DIV class="h">
		您尚未　<a href="login.html">登录</a>
		&nbsp;| &nbsp; <A href="reg.html">注册</A> |
	</DIV>


<BR/>
<!--      导航        -->
<DIV>
	&gt;&gt;<B><a href="index.html">论坛首页</a></B>
</DIV>
<!--      用户登录表单        -->
<DIV class="t" style="MARGIN-TOP: 15px" align="center" id="app">
	<FORM name="loginForm" action="" method="post">
		<br/>用户名 &nbsp;<INPUT class="input" tabIndex="1"  type="text"      maxLength="20" size="35" name="uname" v-model="uname">
		<br/>密　码 &nbsp;<INPUT class="input" tabIndex="2"  type="password"  maxLength="20" size="40" name="upass" v-model="upass">
		<br/>验证码
			<img src="http://localhost:20001/bbs-security/user/code.action" width="100px" height="50px">
			<input type="text" name="valcode" v-model="valcode" />

		<br/><INPUT class="btn"  tabIndex="6"  type="button" value="登 录"  @click="login()">
	</FORM>
</DIV>
<!--      声明        -->
<BR/>
<CENTER class="gray">源辰信息</CENTER>
</BODY>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
	// 配置访问的地址
	var base_url = "http://localhost:20001/";	// gateway地址
	var addr_ressecurity = base_url + "bbs-security/";

	let vm = new Vue({
		el: "#app",
		data: {
			uname: "a",
			upass: "a",
			valcode: 1234
		},
		methods: {
			login:function(){

				var params = new URLSearchParams();
				params.append("uname", this.uname);
				params.append("upass", this.upass);
				params.append("valcode", this.valcode);

				// post的结果 是一个Promise对象
				axios.post(addr_ressecurity + "user/login.action", params).then( data=>{
					var result = data.data;
					if (result.code === 0){
						alert("登录失败，原因：" + result.msg);
						return;
					}
					localStorage.setItem("token", "Bearer " + result.data);
					alert("登录成功，获取的token为：" + result.data);
					window.location="index.html";
				});
			}
		},
		computed: {
		},
		mounted:function (){
		}
	});
</script>
</HTML>
